<template>
	<view>
		<image :src="img" mode="widthFix" style="width: 100%;"></image>
		<view class="painter">
			<l-painter :board="board" style="width: 100%;height: 100%;" ref="painterRef" />
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				board: {},
				img: ''
			}
		},
		mounted() {
			this.show()
			this.$nextTick(()=>{
				this.$refs.painterRef.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    // H5 提示用户长按图另存
				    this.img = res.tempFilePath
				  },
				  fail: (err)=>{
					  console.log('err',err)
					 
				  }
				});
			})
		},
		methods:{
			show(){
				let u1 = this.ossUrl + '/static/image/certificate/bg.jpg'
				let u2 = this.ossUrl + '/static/image/certificate/gz.png'
				this.board = {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '1280rpx',
						height: '1810rpx',
						position: "relative",
					},
					views: [
						//底图
						{
							type: 'image',
							src: u1,
							css: {
								width: '100%',
								height: '100%',
							}
						},
						//编号
						{
							type: "text",
							css: {
								width: "200rpx",
								height: "70rpx",
								top: "645rpx",
								left: "625rpx",
								position: "absolute",
								zIndex: "9",
								//background: 'rgba(0,0,0,0.5)',
								textAlign: 'center',
								fontSize: '36rpx',
								color: '#af0505'
							},	
							text: '25623435'
						},
						//姓名
						{
							type: "text",
							css: {
								width: "400rpx",
								height: "70rpx",
								top: "720rpx",
								left: "455rpx",
								position: "absolute",
								zIndex: "9",
								//background: 'rgba(0,0,0,0.5)',
								textAlign: 'left',
								fontSize: '36rpx',
								color: '#000'
							},	
							text: '张某某'
						},
						//授权时间
						{
							type: "text",
							css: {
								width: "400rpx",
								height: "70rpx",
								bottom: "265rpx",
								left: "725rpx",
								position: "absolute",
								zIndex: "9",
								//background: 'rgba(0,0,0,0.5)',
								textAlign: 'left',
								fontSize: '36rpx',
								color: '#000'
							},	
							text: '2025年12月15日'
						},
						//公章
						{
							type: 'image',
							src: u2,
							css: {
								width: "260rpx",
								height: "260rpx",
								bottom: "205rpx",
								left: "750rpx",
								position: "absolute",
								zIndex: "10",
							}
						},
					]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.painter {
		width: 1280rpx;
		height: 1810rpx;
		position: fixed;
		left: -200%;
	}
</style>